<!-- 人员生命、盔甲等横条信息 -->
<template>
  <div class="PeoStatus">
    <div class="infoTop">
      <span class="pull-right lv"
        >LV<strong>{{ peo.level }}</strong></span
      >
      <span class="name"
        >{{ peo.name }}<i>[{{ common.getTypeName('peos', peo.type) }}]</i></span
      >
    </div>
    <ul class="lines">
      <li class="item">
        生命：<span class="line hp"
          ><i :style="{ width: hpPerc + '%' }"></i
          ><b>{{ peo.hp + '/' + peo.hpMax }}</b></span
        >
      </li>
      <li class="item">
        头盔：<span class="line dur"
          ><i :style="{ width: headPerc + '%' }"></i><b>{{ headData }}</b></span
        >
      </li>
      <li class="item">
        盔甲：<span class="line dur"
          ><i :style="{ width: bodyPerc + '%' }"></i><b>{{ bodyData }}</b></span
        >
      </li>
    </ul>
    <Status :buffs="peo.buffs"></Status>
  </div>
</template>

<script>
import Status from '@/components/Status.vue';
export default {
  components: { Status },
  props: ["peo"],
  data() {
    return {
      hpPerc: 0,
      headPerc: 0,
      headData: "0/0",
      bodyPerc: 0,
      bodyData: "0/0",
    }
  },
  mounted() {
    this.update()
  },
  watch: {
    peo: {
      handler(newValue, oldValue) {
        this.update()
      },
      deep: true
    }
  },
  methods: {
    update() {
      this.hpPerc = Math.round(this.peo.hp / this.peo.hpMax * 100);

      this.headPerc = this.peo._equips.head ? Math.round(this.peo._equips.head.dur / this.peo._equips.head.durMax *
        100) : 0;

      this.headData = this.peo._equips.head ? this.peo._equips.head.dur + "/" + this.peo._equips.head.durMax :
        "0/0";

      this.bodyPerc = this.peo._equips.body ? Math.round(this.peo._equips.body.dur / this.peo._equips.body.durMax *
        100) : 0;

      this.bodyData = this.peo._equips.body ? this.peo._equips.body.dur + "/" + this.peo._equips.body.durMax :
        "0/0";

    }
  }
}
</script>

<style lang="scss">
.PeoStatus {
  font-size: 12px;
  .infoTop {
    padding: 10px 0;
    text-align: left;
    line-height: 22px;

    .name {
      font-size: 16px;

      i {
        font-size: 14px;
        opacity: 0.7;
        margin-left: 10px;
      }
    }

    .lv {
      font-size: 12px;

      strong {
        font-size: 16px;
      }
    }
  }

  .lines {
    position: relative;
    text-align: left;
    line-height: 17px;
    margin-bottom: 5px;

    .item {
      position: relative;
    }
  }

  .line {
    text-align: center;
    display: block;
    position: absolute;
    left: 40px;
    right: 0;
    top: 1px;
    background: #545454;
    height: 14px;
    line-height: 14px;
    border-radius: 10px;
    overflow: hidden;

    i {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      height: 100%;
      background: #07d165;
      background-image: linear-gradient(to left, #07d165, #037c3c);
    }

    b {
      font-weight: normal;
      position: relative;
      text-shadow: 1px 1px 0 #000;
    }
  }

  .status {
    position: relative;
    bottom:0;
    line-height: 20px;
    .iconfont{
      font-size: 20px;
      margin-left:5px;
    }
  }

  .dur {
    i {
      background: #cfcfcf;
      background-image: linear-gradient(to left, #cfcfcf, #6f6f6f);
    }
  }
}
</style>
